<template>
	<view class="index">
		<view class="circle" 
		:style="{
			'width':w+'px','height':w+'px',
			'fontSize':s+'px',
			'lineHeight':w+'px'
			}">
			宽：<text>{{w}}-{{s}}</text>
		</view>
		<!-- 监听change事件更新 w或者s -->
		<!-- 父传子：props  父用 :属性=“值”  子用 props接收-->
		<step :modelValue="w" @change="w=$event.detail.value" :step="10"></step>
		<step :modelValue="s" @change="s=$event.detail.value" :step="5"></step>
		<step :modelValue="s" @update:modelValue="s=$event" :step="2"></step>
		<!--vue3  v-model="s" 是一个简写形式 :modelValue="s" @update:modelValue="s=$event"
		 -->
		 <!--vue2 v-model="s" :value="s" @input="s=$event" -->
		<step v-model="s" :step="0.5"></step>
	</view>
</template>
<script>
	// step组件：传入一个数，可以加1，减去1
	// props：moduleValue，
	// methods：calc 加1,减1
	// 事件：change值发生变化时候
	// uni-app使用easy 导入方式 /components/组件文件夹/组件名称
	// import step from '../../components/step/step.vue'
	export default{
		// components:{step},
		data(){
			return {
				w:100,
				s:14,
			}
		},
		methods:{
			changeHd(e){
				console.log(e);
			}
		}
		 
	 
	}
 
</script>
<style scoped lang="scss">
	.circle{
		border:1px solid red;
		border-radius: 100%;
		text-align: center;
	}
	input{
		height: 66rpx;
		line-height: 66rpx;
		border:1rpx solid #f0f0f0;
		border-radius: 12rpx;
		padding: 0 15rpx;
		margin: 15rpx;
	}
	.title{
		height: 88rpx;
		line-height: 88rpx;
		background-color: #f0f0f0;
		padding: 0 15rpx;
		// border-top: 4rpx solid #f30;
	}
	
</style>